<template>
  <el-card shadow="never" :body-style="{ padding: '10px' }">
    <el-row :gutter="10">
      <el-col :span="5" style="border: 1px solid var(--el-card-border-color);padding-bottom: 5px">
        <form-business-and-market-tree @businessMarketTreeClick="businessMarketTreeClick"></form-business-and-market-tree>
      </el-col>
      <el-col :span="19">
        <el-card shadow="never" :body-style="{ padding: '10px', border: '1px ' }">
          <template #header>
            <div class="card-header">
              <el-form :inline="true" :model="params.entity" class="demo-form-inline">
                <el-form-item label="管理员名称">
                  <el-input v-model="params.entity.username" placeholder="管理员名称" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
                  <el-button type="primary" v-if="hasPermit('admin:add')" :icon="Plus" @click="addDialog">新增</el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>
          <el-table v-loading="loading" :data="tableData.list" style="width: 100%" height="500"
            :default-sort="{ prop: 'date', order: 'descending' }" @selection-change="handleSelectionChange">
            <!-- <el-table-column fixed type="selection" width="55" /> -->
            <el-table-column type="index" width="60" label="序号" align="center" />
            <el-table-column prop="username" label="管理员名称" show-overflow-tooltip />
            <el-table-column prop="deptName" label="单位名称" show-overflow-tooltip />
            <el-table-column prop="phone" label="手机号码" show-overflow-tooltip />
            <!--            <el-table-column prop="email" label="Email" show-overflow-tooltip width="100"/>-->
            <el-table-column prop="roleNames" label="角色" show-overflow-tooltip />
            <el-table-column prop="statusFlag" label="状态" width="120" show-overflow-tooltip>
              <template #default="scope">
                <el-tag v-if="scope.row.statusFlag == 0" class="ml-2" type="danger">停用</el-tag>
                <el-tag v-if="scope.row.statusFlag == 1" class="ml-2" type="success">启用</el-tag>
                <el-tag v-if="scope.row.statusFlag == 2" class="ml-2" type="info">备用</el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="createUser" label="创建人" width="120"/> -->
            <!-- <el-table-column prop="createTime" label="创建时间" width="120"/> -->
            <!-- <el-table-column prop="updateTime" label="修改时间" width="120"/> -->
            <!-- <el-table-column prop="remark" label="备注" width="120"/> -->
            <el-table-column fixed="right" label="操作" width="220">
              <template #header>
                <el-input v-model="params.search" @keyup.enter.native="searchData" placeholder="搜索管理员名称/手机号码" />
              </template>
              <template #default="scope">
                <el-button link type="danger" :icon="Delete" size="small" @click="showDeleteDialog(scope.row.id)">删除
                </el-button>
                <el-button link type="primary" :icon="Edit" size="small" @click="editDialog(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
            :page-sizes="[100, 200, 300, 400]" layout="sizes, prev, pager, next" :total="tableData.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增或者修改页面-->
    <UserAddOrEdit @closeEditDialog="closeEditDialog" :addOrEditVisible="addOrEditVisible" :ruleForm="ruleForm"
      :addDataType="addDataType"></UserAddOrEdit>
  </el-card>
</template>

<script lang="ts" setup>
import { ElTable, ElMessage, ElTree, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
import { deleteAdminById, adminPage } from "@/apis/http/system/AdminHttp"
import { Params } from "@/apis/model/common/common.interfaces"
import { Delete, Edit, Search, Share, Upload, Plus } from '@element-plus/icons-vue'
import UserAddOrEdit from './AdminAddOrEdit.vue'
import { Admin } from "@/apis/model/system/AdminModel";
import { deptLoop } from "@/apis/http/system/DeptHttp";
import { Dept } from "@/apis/model/system/DeptModel";
import { hasPermit } from "@/util/common.util";
import FormBusinessAndMarketTree from "@/components/form/FormBusinessAndMarketTree.vue";

const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {} as Admin
})

const ruleForm = ref<Admin>({} as Admin)
// AddOrEditVisible
const addOrEditVisible = ref(false)
// table 表数据
const tableData: any = ref({});

// 加载数据
const loading = ref(true)
const addDataType = ref('add');

/**
 * 初始化数据
 */
const initList = () => {
  loading.value = true
  adminPage(params).then(res => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {
  addOrEditVisible.value = true
  ruleForm.value = {} as Admin
  addDataType.value = 'add'
}

/**
 * 修改弹出页面
 */
const editDialog = (row: Admin) => {
  addOrEditVisible.value = true
  ruleForm.value = row
  addDataType.value = 'edit'
}

const closeEditDialog = (e: any) => {
  addOrEditVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  ElMessageBox.confirm(
    '是否删除角色?',
    '提醒',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteAdminById(id).then(res => {
        const code = res.code;
        if (code == 200) {
          ElMessage({
            message: '删除数据成功！',
            type: 'success',
          })
          initList();
        } else {
          ElMessage.error('删除数据失败！');
        }
      })
    })
    .catch(() => {
      // ElMessage({
      //   type: 'info',
      //   message: 'Delete canceled',
      // })
    })
}

const multipleSelection = ref<Admin[]>([])
const handleSelectionChange = (val: Admin[]) => {
  multipleSelection.value = val
}

// 这个打印出来的是node
const businessMarketTreeClick = (e: any) => {
  params.entity.deptId = e.deptId;
  initList();
}

/**
 * 获取本地图
 * @param name // 文件名 如 doc.png
 * @returns {*|string}
 */
function getAssetsImages(name: string) {
  return new URL(`/src/assets/tree/${name}`, import.meta.url).href;
}

onMounted(() => {
  initList()
})
</script>

<style lang="scss" scoped></style>
